<!-- 商家优惠券编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate?'修改商家团购优惠券':'添加商家团购优惠券'"
    :visible="visible"
    width="650px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="140px">
      <el-form-item label="背景图:">
        <uploadImage :limit="1" v-model="form.image_url"></uploadImage>
      </el-form-item>
      <el-form-item
        label="名称:"
        prop="title">
        <el-input
          :maxlength="20"
          v-model="form.title"
          placeholder="请输入名称"
          clearable/>
      </el-form-item>
      <el-form-item
        label="优惠价格:"
        prop="price">
        <el-input-number
          type="number"
          :maxlength="20"
          v-model="form.price"
          placeholder="请输入优惠价格"
          clearable/>
      </el-form-item>
      <el-form-item
        label="原价:"
        prop="price">
        <el-input-number
          type="number"
          :maxlength="20"
          v-model="form.originalprice"
          placeholder="请输入原价"
          clearable/>
      </el-form-item>
<!--      <el-form-item label="时长:" prop="number">
        <el-input-number
          :min="0"
          v-model="form.shichang"
          placeholder="请输入发布数量"
          controls-position="right"
          class="ele-fluid ele-text-left"/>
      </el-form-item> -->
      <el-form-item label="发布数量:" prop="number">
        <el-input-number
          :min="0"
          v-model="form.number"
          placeholder="请输入发布数量"
          controls-position="right"
          class="ele-fluid ele-text-left"/>
      </el-form-item>
      <el-form-item label="适用包厢:" prop="course_id">
        <el-select
          multiple
          clearable
          class="ele-block"
          v-model="form.course_id"
          placeholder="请选择适用包厢">
          <el-option
            v-for="item in packageList"
            :key="item.id"
            :value="item.id"
            :label="item.name"/>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="开始时间:" prop="add_time">
        <el-date-picker
          type="date"
          class="ele-fluid"
          v-model="form.add_time"
          value-format="yyyy-MM-dd"
          placeholder="请输入开始时间"/>
      </el-form-item>
      <el-form-item label="到期时间:" prop="end_time">
        <el-date-picker
          type="date"
          class="ele-fluid"
          v-model="form.end_time"
          value-format="yyyy-MM-dd"
          placeholder="请输入到期时间"/>
      </el-form-item> -->

      <el-form-item label="场次:" prop="status">
        <el-radio-group
          v-model="form.time_type">
          <el-radio :label="0">白天场6小时(9点-18点)</el-radio>
           <el-radio :label="1">白天场4小时(9点-18点)</el-radio>
          <el-radio :label="2">通宵场8小时(23点-9点)</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="美团拼团兑换id:" prop="meituan_id">
        <el-input-number
          :min="0"
          v-model="form.meituan_id"
          placeholder="请输入美团拼团兑换id"
          controls-position="right"
          class="ele-fluid ele-text-left"/>
      </el-form-item>
      <el-form-item label="抖音兑换id:" prop="trill_id">
        <el-input-number
          :min="0"
          v-model="form.trill_id"
          placeholder="请输入抖音兑换id"
          controls-position="right"
          class="ele-fluid ele-text-left"/>
      </el-form-item>
    <!-- <el-row :gutter="15">
        <el-col :sm="12">
          <el-form-item label="开始时间段:" prop="hours_add_time">
            <el-select
              clearable
              class="ele-block"
              v-model="form.hours_add_time"
              placeholder="请选择开始时间段">
             <el-option label="00" :value="0"/>
              <el-option label="01" :value="1"/>
              <el-option label="02" :value="2"/>
              <el-option label="03" :value="3"/>
              <el-option label="04" :value="4"/>
              <el-option label="05" :value="5"/>
              <el-option label="06" :value="6"/>
              <el-option label="07" :value="7"/>
              <el-option label="08" :value="8"/>
              <el-option label="09" :value="9"/>
             <el-option label="10" :value="10"/>
              <el-option label="11" :value="11"/>
              <el-option label="12" :value="12"/>
              <el-option label="13" :value="13"/>
              <el-option label="14" :value="14"/>
              <el-option label="15" :value="15"/>
              <el-option label="16" :value="16"/>
              <el-option label="17" :value="17"/>
              <el-option label="18" :value="18"/>
              <el-option label="19" :value="19"/>
              <el-option label="20" :value="20"/>
              <el-option label="21" :value="21"/>
              <el-option label="22" :value="22"/>
              <el-option label="23" :value="23"/>
            </el-select>
          </el-form-item>


          <el-form-item label="结束时间段:" prop="hours_end_time">
            <el-select
              clearable
              class="ele-block"
              v-model="form.hours_end_time"
              placeholder="请选择时间段">

             <el-option label="01" :value="1"/>
              <el-option label="02" :value="2"/>
              <el-option label="03" :value="3"/>
              <el-option label="04" :value="4"/>
              <el-option label="05" :value="5"/>
              <el-option label="06" :value="6"/>
              <el-option label="07" :value="7"/>
              <el-option label="08" :value="8"/>
              <el-option label="09" :value="9"/>
              <el-option label="10" :value="10"/>
              <el-option label="11" :value="11"/>
              <el-option label="12" :value="12"/>
              <el-option label="13" :value="13"/>
              <el-option label="14" :value="14"/>
              <el-option label="15" :value="15"/>
              <el-option label="16" :value="16"/>
              <el-option label="17" :value="17"/>
              <el-option label="18" :value="18"/>
             <el-option label="19" :value="19"/>
              <el-option label="20" :value="20"/>
              <el-option label="21" :value="21"/>
              <el-option label="22" :value="22"/>
              <el-option label="23" :value="23"/>
              <el-option label="24" :value="24"/>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
 -->
      <el-form-item label="状态:" prop="status">
        <el-radio-group
          v-model="form.status">
          <el-radio :label="1">开启</el-radio>
          <el-radio :label="0">不开启</el-radio>
        </el-radio-group>
      </el-form-item>
<!--      <el-form-item label="限领多少张:" prop="user_num">
        <el-input-number
          :min="0"
          v-model="form.user_num"
          placeholder="请输入限领多少张"
          controls-position="right"
          class="ele-fluid ele-text-left"/>
      </el-form-item> -->




    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="loading">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadImage from '@/components/uploadImage'
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import TinymceEditor from '@/components/TinymceEditor';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
export default {
  name: 'CouponEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: {uploadImage},
  data() {
    return {
      // 表单数据
      form: Object.assign({status: 1}, this.data),
      // 表单验证规则
      rules: {
        image_url: [
          {required: true, message: '请上传图片', trigger: 'blur'}
        ],

        title: [
          {required: true, message: '请输入名称', trigger: 'blur'}
        ],

        number: [
          {required: true, message: '请输入发布数量', trigger: 'blur'}
        ],

        is_goods: [
          {required: true, message: '请选择是否开启商品优惠', trigger: 'blur'}
        ],
        type: [
          {required: true, message: '请选择优惠券类型', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ],
        user_num: [
          {required: true, message: '请输入限领多少张', trigger: 'blur'}
        ],

        is_status: [
          {required: true, message: '请选择是否弹窗', trigger: 'blur'}
        ],
        is_type: [
          {required: true, message: '请请选择有效期类型', trigger: 'blur'}
        ],


      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,

      // 期限卡类别
      typeList: [],
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data, {
          course_id: this.data.crad.map(d => d.id),
        });
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    }
  },
  mounted() {

    this.getPackageList();
    this.getStoreList();
  },
  methods: {


    /* 保存编辑 */
    save() {
      if(this.form.time_type==0){
          this.form.shichang=6;
       this.form.hours_add_time=9;
         this.form.hours_end_time=18;
      }else if(this.form.time_type==1){
          this.form.shichang=4;
      this.form.hours_add_time=9;
        this.form.hours_end_time=18;
      }else if(this.form.time_type==2){
         this.form.shichang=8;
       this.form.hours_add_time=23;
         this.form.hours_end_time=9;
      }

      this.$refs['form'].validate((valid) => {

        if (valid) {
          this.loading = true;
          this.$http.post('/pricecoupon/edit', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },


    getPackageList() {
      this.$http.get('/course/index').then(res => {
        if (res.data.code === 0) {
          this.packageList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },

  }
}
</script>

<style scoped>
</style>
